<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>统计信息</title>
</head>
<body>

<div id="age-chart" style="width: 600px; height: 300px;"></div>
<script src="/static/echarts.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.$.ajax({
        url: "/api/stat",
        type: "get",
        async: false,
        success: function (data) {
            // 初始化 ECharts 实例
            var chart = echarts.init(document.getElementById('age-chart'));

            var data = {
                ageGroups: data.data.tags,
                counts: data.data.counts
            };

            // 配置选项
            var option = {
                title: {
                    text: '年龄统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.ageGroups,
                    axisLabel: {
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '人数'
                },
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: data.counts,
                    itemStyle: {
                        color: '#73C0DE'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }]
            };

            // 使用配置项生成图表
            chart.setOption(option);
        }
    });


</script>
</body>
</html>